<template>
  <div style="height: 100%;position: relative;">

    <div class="setting">
      <el-row :gutter="10">
        <el-col :span="6" :offset="6" :class="set_avatar ? 'active-color':'unactive-color'">是否修改头像</el-col>
        <el-col :span="1" :offset="4">
          <el-switch
              v-model="set_avatar"
              active-color="#409EFF"
              inactive-color="#8c939d">
          </el-switch>
        </el-col>
      </el-row>
      <el-row :gutter="10">
       <el-col :span="6" :offset="9">
         <el-avatar v-if="!set_avatar" shape="square" :src="userData.avatar"/>
         <el-upload
             v-else
             name="blogAvatars"
             class="avatar-uploader"
             :action="globalApi.uploadImg"
             :show-file-list="false"
             :on-success="handleAvatarSuccess">
           <img v-if="settingData.avatar" :src="settingData.avatar" class="avatar">
           <i v-else class="el-icon-plus avatar-uploader-icon"/>
         </el-upload>
       </el-col>
      </el-row>
      <el-row v-if="!validate.is_validAvatar" class="validate-msg" :gutter="10">
        <el-col :span="12" :offset="6">
          <span>{{validateMsg.avatarMsg}}</span>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6" :offset="6" :class="set_userName ? 'active-color':'unactive-color'">是否修改用户名</el-col>
        <el-col :span="1" :offset="4">
          <el-switch
              v-model="set_userName"
              active-color="#409EFF"
              inactive-color="#8c939d">
          </el-switch>
        </el-col>
      </el-row>
      <el-row :gutter="10">
       <el-col :span="12" :offset="6">
         <el-input
             @blur="validateUserName"
             v-model="settingData.userName"
             prefix-icon="el-icon-user-solid"
             :disabled="!set_userName"
             :placeholder="set_userName? '请输入用户名' : userData.userName"
         />
       </el-col>
      </el-row>
      <el-row v-if="!validate.is_validUserName" class="validate-msg" :gutter="10">
        <el-col :span="12" :offset="6">
          <span>{{validateMsg.userNameMsg}}</span>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6" :offset="6" :class="set_description ? 'active-color':'unactive-color'">是否修改简介</el-col>
        <el-col :span="1" :offset="4">
          <el-switch
              v-model="set_description"
              active-color="#409EFF"
              inactive-color="#8c939d">
          </el-switch>
        </el-col>
      </el-row>
      <el-row :gutter="10">
       <el-col :span="12" :offset="6">
         <el-input
             @blur="validateDesp"
             v-model="settingData.description"
             type="textarea"
             :disabled="!set_description"
             :placeholder="set_description ? '请输入简介' : (userData.introduction || '暂无简介')"/>
       </el-col>
      </el-row>
      <el-row v-if="!validate.is_validDescription" class="validate-msg" :gutter="10">
        <el-col :span="12" :offset="6">
          <span>{{validateMsg.descriptionMsg}}</span>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6" :offset="6" :class="set_password ? 'active-color':'unactive-color'">是否修改密码</el-col>
        <el-col :span="1" :offset="4">
          <el-switch
              v-model="set_password"
              active-color="#409EFF"
              inactive-color="#8c939d">
          </el-switch>
        </el-col>
      </el-row>
      <el-row :gutter="10">
       <el-col :span="12" :offset="6">
         <el-input
             @blur="validatePwd"
             v-model="settingData.password"
             :disabled="!set_password"
             type="password"
             show-password
             placeholder="请输入新密码"
             prefix-icon="el-icon-lock"
         />
       </el-col>
      </el-row>
      <el-row v-if="!validate.is_validPassword" class="validate-msg" :gutter="10">
        <el-col :span="12" :offset="6">
          <span>{{validateMsg.passwordMsg}}</span>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="12" :offset="6">
          <el-input
              @blur="confirmPassword"
              v-model="settingData.confirmPwd"
              :disabled="!set_password"
              type="password"
              show-password
              placeholder="请确认密码"
              prefix-icon="el-icon-lock"
          />
        </el-col>
      </el-row>
      <el-row v-if="!validate.is_confirmedPwd" class="validate-msg" :gutter="10">
        <el-col :span="12" :offset="6">
          <span>{{validateMsg.confirmPwdMsg}}</span>
        </el-col>
      </el-row>
    </div>

    <div class="fx-drawer__footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import globalApi from '@/config/globalApi'
import UserDetailService from '@/service/users/UserDetailService'

export default {
  name: "UserSetting",
  props: {
    userData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data(){
    return {
      set_avatar: false,
      set_userName: false,
      set_description: false,
      set_password: false,
      validate:{
        is_validAvatar: true,
        is_validUserName: true,
        is_validDescription: true,
        is_validPassword: true,
        is_confirmedPwd: true
      },
      validateMsg:{
        avatarMsg: '',
        userNameMsg: '',
        descriptionMsg: '',
        passwordMsg: '',
        confirmPwdMsg: ''
      },
      globalApi,
      settingData:{
        avatar: '',
        userName: '',
        description: '',
        password: '',
        confirmPwd: '',
      }
    }
  },
  methods: {

    // 头像获取
    handleAvatarSuccess(res) {
      this.settingData.avatar = res.data.imgList[0]
    },

    close() {
      this.$emit('close')
    },
    // 校验头像
    validateAvatar () {
      if(!this.settingData.avatar){
        this.validateMsg.avatarMsg = '请给自己一个酷酷的形象吧！'
        this.validate.is_validAvatar = false
      }else{
        this.validate.is_validAvatar = true
      }

      return this.validate.is_validAvatar
    },
    // 校验用户名
    validateUserName () {
      // 不能为空
      if(!this.settingData.userName){
        this.validateMsg.userNameMsg = '请给自己取个优雅的昵称吧！'
        this.validate.is_validUserName = false
        return false
      }
      // 不能包含空格
      if(this.settingData.userName.includes(' ')){
        this.validateMsg.userNameMsg = '用户名不能包含空格！'
        this.validate.is_validUserName = false
        return false
      }
      // 长度限制
      if(this.settingData.userName.length < 2 || this.settingData.userName.length > 8){
        this.validateMsg.userNameMsg = '用户名长度在 2~8 个字符！'
        this.validate.is_validUserName = false
        return false
      }
      // 只能包含中文、英文和数字
      if(!/^[\u4E00-\u9FA5A-Za-z0-9]{2,8}$/.test(this.settingData.userName)){
        this.validateMsg.userNameMsg = '用户名只能包含中文、英文、数字！'
        this.validate.is_validUserName = false
        return false
      }
      // 不能与原来的名字一样
      if(this.settingData.userName === this.userData.userName){
        this.validateMsg.userNameMsg = '用户名无需更新！'
        this.validate.is_validUserName = false
        return false
      }
      this.validate.is_validUserName = true
      return true
    },
    // 校验简介
    validateDesp () {
      if(!this.settingData.description){
        this.validateMsg.descriptionMsg = '请给自己一份亮眼的简介吧！'
        this.validate.is_validDescription = false
        return false
      }
      this.validate.is_validDescription = true
      return true
    },
    // 校验密码
    validatePwd () {
      if(!this.settingData.password){
        this.validateMsg.passwordMsg = '新密码不能为空！'
        this.validate.is_validPassword = false
      }

      if (this.settingData.password.length < 6 || this.settingData.password.length > 16) {
        this.validateMsg.passwordMsg = '密码长度为 6~16 位字符！'
        this.validate.is_validPassword = false
        return false
      }

      if (this.settingData.password.includes(' ')) {
        this.validateMsg.passwordMsg = '密码不能包含空格！'
        this.validate.is_validPassword = false
        return false
      }

      if (/[\u4E00-\u9FA5]+/.test(this.settingData.password)) {
        this.validateMsg.passwordMsg = '密码不能包含中文！'
        this.validate.is_validPassword = false
        return false
      }
      if (!/^\S*(?=\S*\d)(?=\S*[a-zA-Z])\S*$/.test(this.settingData.password)) {
        this.validateMsg.passwordMsg = '密码必须包含数字和字母！'
        this.validate.is_validPassword = false
        return false
      }

      this.validate.is_validPassword = true
      return true
    },
    // 确认密码
    confirmPassword(){
      if(this.settingData.password !== this.settingData.confirmPwd){
        this.validate.is_confirmedPwd = false
        return false
      }
      this.validate.is_confirmedPwd = true
      return true
    },

    async submit() {

      let data = {}

      if(this.set_avatar && this.validateAvatar()){
        data.avatar = this.settingData.avatar
      }

      if(this.set_userName && this.validateUserName()){
        data.userName = this.settingData.userName
      }

      if(this.set_description && this.validateDesp()){
        data.introduction = this.settingData.description
      }

      if(this.set_password && this.validatePwd() && this.confirmPassword()){
        data.password = this.settingData.password
      }

      // 如果有需要修改的参数 就发起修改请求
      if(Object.keys(data).length){
        const res = await UserDetailService.setUserInfo(data)
        if(res.data.status !== 200){
          return this.$message.error(res.data.message)
        }
        this.$message.success(res.data.message)
        setTimeout(() => {
          this.$router.go(0)
        }, 1500)
      }else {
        this.$message.warning('没什么需要修改的！')
      }

    }
  },
  watch:{
    set_avatar: function (newValue) {
      if(!newValue){
        this.validate.is_validAvatar = true
      }
    },
    set_userName: function (newValue) {
      if(!newValue){
        this.validate.is_validUserName = true
      }
    },
    set_description: function (newValue) {
      if(!newValue){
        this.validate.is_validDescription = true
      }
    },
    set_password: function (newValue) {
      if(!newValue){
        this.validate.is_validPassword = true
        this.validate.is_confirmedPwd = true
      }
    }
  }
}
</script>

<style scoped>
div.setting{
  width: 100%;
  overflow: hidden;
}

.active-color{
  color: #409EFF;
}

.unactive-color{
  color: #8c939d;
}

.validate-msg{
  margin-top: -10px;
  margin-bottom: 0;
}

div.fx-drawer__footer {
  position: absolute;
  bottom: 15%;
  left: 30%;
}

>>> .el-row{
  margin-bottom: 10px;
}

.el-button {
  margin-left: 20px;
  padding: 12px 30px;
}

>>> .el-avatar {
  width: 120px;
  height: 120px;
}

>>> .avatar-uploader .el-upload {
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}
>>> .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
>>> .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
>>> .avatar {
  width: 120px;
  height: 120px;
  display: block;
}

span {
  font-size: 14px;
  color: red;
}
</style>
